
/*
    CheckBox Item who will be used as delegate in ToDo list
*/
import QtQuick 1.0

Rectangle
{
    id: idCheck    
    //width: idRow.width + 20
    width : idRow.width
    height: idRow.height + 6
    property alias text: label.text
    property alias textColor: label.color
    property bool  pressed: false
    property bool  upDownVisible:false
    property alias textFromEdit: idTextInputEditItem.text


    signal deleteCheckBoxImgClicked
    signal checked
    signal unChecked
    signal moveUp
    signal moveDown
    signal editItem    

    smooth: true
    radius: 10
    state:  ''
    color: "#e6e698"
    ColorAnimation on color { to: "ivory"; duration: 1000 }

    /*
      this function change state of item: checked or unchecked
    */
    function toggle ()
    {
        if (idCheck.state == "on")
        {
                idCheck.state = "off";
                idCheck.unChecked();
        }
        else
        {
            idCheck.state = "on";
            idCheck.checked();
        }
    }


    //function for show just check/unchek and title
    function afterEdit()
    {
        idColumnForEditItem.visible = false
        deleteCheckBoxImg.visible = false
        downArrowCheckBoxImg.visible = false
        upArrowCheckBoxImg.visible = false
        idColumnForEditItem.visible = false
        label.visible = true
    }

    function beforeEdit()
    {
        deleteCheckBoxImg.visible = true;
        if(upDownVisible)
        {
            downArrowCheckBoxImg.visible = true
            upArrowCheckBoxImg.visible = true
        }
        idColumnForEditItem.visible = true
        label.visible = false
    }

    Row
    {
        id:idRow
        width: 200
        spacing: 2
        move: Transition {
                    NumberAnimation { properties: "x"; easing.type: Easing.OutBounce }
                }
        add: Transition {
            NumberAnimation { properties: "x,detailsOpacity"; easing.type: Easing.InQuad }
        }
        // image for check on uncheck state
        ImageButton
        {
            id: checkBoxImg
            source: "images/checkbox_unchecked.png"
            width :20
            height:20
            color: idCheck.color
            visible:true
            onClicked: toggle()

        }

        //image for delete item
        ImageButton
        {
            id: deleteCheckBoxImg            
            width :20
            height:20
            color: idCheck.color
            visible:false
            source: "images/Icon_Delete.png"                        
            onClicked: idCheck.deleteCheckBoxImgClicked()

        }

        Column
        {
            //image for move item up
            ImageButton
            {
                id: upArrowCheckBoxImg
                width :20
                height:20
                visible:false
                color: idCheck.color
                source: "images/arrow_up.png"
                onClicked: idCheck.moveUp()

            }

            //image for move item down
            ImageButton
            {
            id: downArrowCheckBoxImg
            width :20
            height:20
            color: idCheck.color
            visible:false
            source: "images/arrow_down.png"
            onClicked: idCheck.moveDown()

        }
        }
        // text for title of item
        Text
        {
            id: label            
            width:idCheck.width - 20            
            verticalAlignment: Text.AlignVCenter
            wrapMode: Text.WordWrap
            font.pointSize :10
            MouseArea
            {
                id: mouseAreaText
                anchors.fill: parent
                onClicked:
                    beforeEdit()

            }

        }

        //text imput for edit item
        Column
        {
            id:idColumnForEditItem
            spacing:10
            visible:false
            Rectangle
            {
                id:idRectangleEditItem
                border.color: "#acbbdb"
                color: "#ffffff"
                radius: 3
                width: idTextInputEditItem.width + 5
                height: idTextInputEditItem.height + 3

                TextInput
                {
                    id: idTextInputEditItem
                    x: 5
                    y: 3
//                    wrapMode:TextEdit.WordWrap
                    text: label.text
                    font.pointSize :10
                    width:idCheck.width - 90
                    height: 20
                    Keys.onReturnPressed:
                    {
                        idCheck.editItem()
                        afterEdit()                       

                    }

                }
            }
            Row
            {
                spacing:10
                //save this modifications
                TextButton
                {
                    id: idEditThisItem
                    opacity: listItem.detailsOpacity
                    text: "Save modifications"
                    colorGradientTo: "#acbbdb"
                    onClicked:
                    {
                        idCheck.editItem()
                        afterEdit()
                    }
                 }

                /*
                  cancel edit item
                */
                TextButton
                {
                    id: idCancelEditItem
                    //opacity: listItem.detailsOpacity
                    text: "Cancel"
                    colorGradientTo: "#acbbdb"
                    onClicked:
                        afterEdit()
                  }
            }

       }


    }

    //state of item: checked or unchecked
    states: [
        State {
            name: "on"
            PropertyChanges { target: checkBoxImg; source: "images/checkbox_checked.png" }
            PropertyChanges { target: idCheck; pressed: true }

        },

        State
        {
            name: "off"
            PropertyChanges { target: checkBoxImg; source: "images/checkbox_unchecked.png" }
            PropertyChanges { target: idCheck; pressed: false }
        }

    ]


}

